<template>
  <el-scrollbar height="100%">
    <div class="w subject">
      <el-row :gutter="30">
        <el-col :span="12" v-for="item in paginatedData"
                @click="subject(item.id)"
                :key="item.id">
          <el-card style="background-color:#0f1827;border: #0f1827;
            margin-bottom: 30px;
       height: auto;position: relative">
            <img :src="BASE_URL + item.poster" style="width: 100%;height: 300px"
                 alt="item.description">
            <div class="mask"></div>
            <div class="subject-info">
              <p> {{ item.subjectName }} : {{ item.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-card class="w paginationStyle">
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="tableData.length"
          @current-change="handlePageChange"
          style="position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);"
      />
    </el-card>

  </el-scrollbar>
</template>

<script setup>

import axios from "axios";
import {ElMessage} from "element-plus";
import {computed, onMounted, ref} from "vue";
import router from "@/router";

const tableData = ref([]);
const currentPage = ref(1);// 默认显示页码
const pageSize = ref(8); // 每页显示几条

// 计算当前页面的数据
const paginatedData = computed(() => {
  const offset = (currentPage.value - 1) * pageSize.value;
  return tableData.value.slice(offset, offset + pageSize.value);
});

// 分页变化时触发
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};

const search = () => {
  axios.get(BASE_URL + '/v1/subject/select?')
      .then((response) => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  search();
})
const subject = (id) => {
  router.push('/subjectDetails?id=' + id)
}
</script>

<style scoped>
.subject {
  height: 1480px;
}

.paginationStyle {
  margin-top: 20px;
  height: 50px;
  background-color: #0f1827;
  border: #0f1827;
  border-radius: 10px;
  position: relative;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(360deg, #0f1827 10%, rgba(15, 24, 39, 0) 70%);
}

.subject-info {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 30px;

  p {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
  }
}
</style>
<style>
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .el-pager li.is-active {
  background-color: #671523;
}

</style>